<!-- 商品详情重构页面 -->
<template>
	<view :style="{ '--color': color }">
		<view class="detailPage bgf8" :style="{ '--page-bot': mode ? '212rpx' : '120rpx' }" v-if="pageData">
			<!-- 返回、购物车 -->
			<view class="fcBtn d-flex a-center bgwhite" :style="{ top: menuButtonTop + 'px', opacity: 0.8 }">
				<view class="flex-1 flexac">
					<text class="iconfont icon-shouyeT211 color_66 bold" v-if="fromShare == 1"
						@click="backHome()"></text>
					<text class="iconfont icon-xiangzuo color_66" v-else @click="back()"></text>
				</view>
				<u-line direction="column" :hairline="false" length="16"></u-line>
				<view class="flex-1 flexac p-re" @click="toCart">
					<text class="iconfont icon-gouwuche color_66 bold"></text>
					<u-badge type="error" max="99" :value="cartNum" absolute :offset="[-8, -4]"></u-badge>
				</view>
			</view>
			<!-- 顶部导航 -->
			<view class="topNav bgwhite" :class="{ showTopNav: toTop, hideTopNav: !toTop && showed }">
				<view :style="{ height: totalHeight + 'px' }"></view>
				<u-tabs :list="tabList" :current="currentTab" :lineColor="color" lineWidth="28" @click="tabClick"
					:itemStyle="{ width: tabWidth, height: '88rpx' }"
					:inactiveStyle="{ color: '#444', fontSize: '28rpx', transform: 'scale(1)' }"
					:activeStyle="{ color: '#222', fontSize: '28rpx', fontWeight: 'bold', transform: 'scale(1.05)' }"></u-tabs>
			</view>
			<!-- 轮播图 -->
			<view :style="{ height: pageData.photo_proportion * 750 + 'rpx' }">
				<u-swiper height="100%" :list="swiperList" keyName="url" :autoplay="false" radius="0"
					indicatorStyle="right: 40rpx" @change="(e) => (currentNum = e.current)" @click="previewImg">
					<view slot="indicator" class="indicator-num p-top4 p-bot4 d-flex j-centert">
						<text class="h6 white">{{ currentNum + 1 }} / {{ swiperList.length }}</text>
					</view>
				</u-swiper>
			</view>
			<!-- 秒杀、团购活动倒计时 -->
			<view class="countDown d-flex j-sb a-center"
				v-if="pageData.goods_type != 0 && pageData.show_time == 1 && pageData.goods_state != 0">
				<view class="actName size38 white bold flexac t-letter4">{{ pageData.act_name }}</view>
				<view class="d-flex a-center">
					<image :src="baseUrl + '/Uploads/diy/img/lightning.png'" mode="widthFix" style="width: 26rpx">
					</image>
					<view class="m-left20">
						<view class="stock size22 bold500 m-bot16">
							仅剩{{ pageData.stock ? pageData.stock : 0 }}{{ pageData.unit }}</view>
						<view class="progress">
							<u-line-progress :percentage="pageData.sale_percent" activeColor="#FE3C5E"
								inactiveColor="#FFBEBA" height="7" :showText="false"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="p-right30">
					<view class="text-center" v-if="pageData.goods_state == 1">
						<view class="size28 white m-bot10">距离活动结束还剩</view>
						<count-down txtColor="#fff" bg="#313131" fontSize="28" endTxt="本场"
							:time="parseInt(pageData.goods_end_time)"></count-down>
					</view>
					<view class="text-center" v-if="pageData.goods_state == 2">
						<view class="size28 white m-bot10">距离活动开始还有</view>
						<count-down txtColor="#fff" bg="#313131" fontSize="28" endTxt="本场"
							:time="parseInt(pageData.goods_start_time)"></count-down>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="padding20-40 bgwhite">
				<view class="profitTitle_ lines" v-if="pageData.profitTitle">
					<text>{{ pageData.profitTitle }}</text>
				</view>
				<view class="d-flex j-sb a-center m-bot20" v-if="pageData.buy_config.state != 0">
					<view class="d-flex a-center" v-if="pageData.goods_type == 2">
						<view>
							<text class="color_FOD size32 bold">￥</text>
							<text class="color_FOD size40 bold">{{ pageData.goods_fopen_group_pricee }}</text>
						</view>
						<view class="color_66 size28 line-through m-left10"
							v-if="parseFloat(pageData.goods_fopen_group_pricee) < parseFloat(pageData.goods_full_price)">
							￥{{ pageData.goods_full_price }}
						</view>
					</view>

					<view class="d-flex a-center flex-1 f-wrap" v-else>
						<view>
							<text class="color_FOD size32 bold">￥</text>
							<text class="color_FOD size40 bold"
								v-if="parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice)">{{ pageData.minPrice }}</text>
							<text class="color_FOD size40 bold"
								v-else>{{ pageData.minPrice }}-{{ pageData.maxPrice }}</text>
						</view>
						<view class="bgFD8 bor_radius_40 padding4-20 m-left10"
							v-if="pageData.memberprice && parseFloat(pageData.memberprice) < parseFloat(pageData.minPrice)">
							<text class="color_FOD size28">折后价</text>
							<text class="color_FOD size28 bold">￥</text>
							<text class="color_FOD size36 bold">{{ pageData.memberprice }}</text>
						</view>
						<view v-if="
								parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice) &&
								parseFloat(pageData.memberprice) == parseFloat(pageData.minPrice) &&
								parseFloat(pageData.minPrice) < parseFloat(pageData.goods_full_price)
							" class="color_66 size28 line-through m-left10">
							￥{{ pageData.goods_full_price }}
						</view>
						<view class="h6 color_66 m-left20" v-if="pageData.goods_sales_number != 0">
							已售{{ pageData.goods_sales_number }}</view>
					</view>
					<!-- 分享 -->
					<view class="d-flex f-column a-center" @click="handleShare">
						<text class="iconfont icon-fenxiang1 color_66 size36"></text>
						<text class="size22 color_66">分享</text>
					</view>
				</view>

				<view class="row m-top14" v-if="pageData.next_level">
					<view class="dd-inline-block3 h7 bgEA padding10-20 bor_radius_30">{{ pageData.next_level }}</view>
				</view>
				<view class="color_22 size32 bold line50">{{ pageData.goods_name }}</view>
				<view class="d-flex a-center">
					<view class="flex-1">
						<view class="color_77 h6 bold400 line40 m-top20" v-if="pageData.goods_info && mode == 0">
							{{ pageData.goods_info }}
						</view>
					</view>
					<view class="test m-top20" @click="testSample" v-if="pageData.recommend">试样</view>
				</view>
				<view class="color_FOD size26 m-top16 bold" v-if="pageData.expire_at">有效期：{{ pageData.expire_at }}
				</view>

				<!-- 选择规格(餐饮) -->
				<view class="m-top40" v-if="pageData.getGoodsSpecs && mode == 1">
					<view class="d-flex" v-for="(item, index) in specsList" :key="index">
						<view class="size26 color_77 m-right40 m-bot20 line54">{{ item.title }}</view>
						<view class="d-flex f-wrap flex-1">
							<view class="specsTag text-center color_66 bor_radius_6 m-right20 m-bot20"
								@click="handleSpecs(index, itm.state, itm.specs_id)"
								:class="{ active: specs_ids[index] == itm.specs_id, color_cc: !itm.state }"
								v-for="(itm, idx) in item.list" :key="idx" v-show="item.list">
								{{ itm.title }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 品牌 -->
			<goodsBrand :pageData="pageData.goodsBrand" v-if="pageData.goodsBrand"></goodsBrand>

			<!-- 选择规格(电商) -->
			<!-- 	<view class="padding20" v-if="mode == 0">
				<view class="card padding20 bgwhite bor_radius_8">
					<view class="d-flex j-sb m-bot30" @click="showPopup = true; specsFlag = 1" v-if="specsList.length">
						<view>
							<text class="h6 color_77 bold500 m-right34">选择</text>
							<text class="h6 color_22 bold400">{{ specs_title ? specs_title : '产品规格' }}</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
					<view class="d-flex j-sb a-center m-bot30" @click="toUrl(`/orderPage/Addresslist/Addresslist`)">
						<view class="d-flex">
							<text class="h6 color_77 bold500 m-right34">配送</text>
							<view class="h6 color_22 bold400 ellipsis flex-1" v-if="addr">至{{ addr }}</view>
							<text class="h6 color_22 bold400" v-else>请选择</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
					<view class="d-flex j-sb" @click="showFreDesc = true">
						<view>
							<text class="h6 color_77 bold500 m-right34">运费</text>
							<text class="h6 color_22 bold400">{{ freight }}</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
				</view>
			</view> -->

			<!-- 推荐(点餐) -->
			<view class="package padding20" v-if="likeList.length && mode == 1">
				<view class="card padding20 bgwhite bor_radius_8">
					<view class="item bgf8 d-flex bor_radius_10" v-for="(item, index) in likeListCom" :key="index"
						:class="{ 'm-bot20': index != likeListCom.length - 1 }"
						@click="toUrl(`/pages/goods/goods_detail?goodsid=${item.goods_id}&mode=1&scan=${scan}&tid=${tid}`)">
						<view class="p-left20 p-top20 p-bot20">
							<image class="img bor_radius_6"
								:src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'"
								mode="aspectFill"></image>
						</view>
						<view class="d-flex f-column j-sb padding30 flex-1">
							<view class="size26 color_22 bold500 ellipsis_2">{{ item.name }}</view>
							<view class="d-flex j-sb">
								<view class="size30 color_F4 bold">￥{{ item.price }}</view>
								<text class="iconfont icon-zengjia size42 color_ff4"></text>
							</view>
						</view>
					</view>
					<view class="m-top20 d-flex f-column a-center" @click="isFold = !isFold" v-if="likeList.length > 4">
						<text class="h6 color_77 bold400 m-bot10">{{ isFold ? '展开全部' : '收起' }}</text>
						<text class="iconfont icon-xiangxia h6 color_77" v-if="isFold"></text>
						<text class="iconfont icon-xiangshang h6 color_77" v-else></text>
					</view>
				</view>
			</view>
			<!-- 去参团 -->
			<view v-if="pageData.goods_type == 2 && pageData.groupData">
				<Join :groupData="pageData.groupData"></Join>
			</view>
			<!-- 评价 -->
			<view id="evaluate" class="evaluate bgwhite padding30-40 m-bot20"
				:class="{ 'm-top20': !likeList.length && mode == 1 }">
				<view class="d-flex j-sb m-bot40">
					<view class="size32 color_22 bold">
						{{ nameDefinition.goodsName || '宝贝' }}评价({{ commentData.count ? commentData.count.allcount : '0' }})
					</view>
					<view @click="toUrl('/commentPage/comment/commentList?gid=' + goods_id)">
						<text
							class="h6 color_F4 m-right10">好评{{ pageData.goods_favorable ? pageData.goods_favorable : '0' }}%</text>
						<text class="iconfont icon-xiangyouxiayiye h6 color_99"></text>
					</view>
				</view>
				<view class="m-bot30 d-flex f-wrap"
					v-if="commentData.comment_labels && commentData.comment_labels.length">
					<view class="label m-right30 m-bot10 h6 color_44"
						v-for="(item, index) in commentData.comment_labels" :key="index"
						@click="toUrl('/commentPage/comment/commentList?gid=' + goods_id + '&label=' + item.id)">
						{{ item.title }}({{ item.num }})
					</view>
				</view>
				<swiper class="cont" next-margin="150rpx" v-if="commentData.data && commentData.data.length">
					<swiper-item v-for="(item, index) in commentData.data" :key="index"
						@click="toUrl('/commentPage/comment/commentList?gid=' + goods_id + '&comment_id=' + item.comment_id)">
						<view class="item bgFA bor_radius_8 d-flex j-sb">
							<view class="flex-1 padding20">
								<view class="d-flex a-center m-bot20">
									<u-avatar :src="$imgUrls(item.v_headimg)" size="30"></u-avatar>
									<view class="size22 color_66 bold500 m-left10 ellipsis" v-if="item.v_name">
										{{ item.v_name }}
									</view>
								</view>
								<view class="size22 color_44 ellipsis_3 line34">{{ item.comment_word }}</view>
							</view>
							<image class="img" v-if="item.comment_pic && item.comment_pic[0]"
								:src="$imgUrls(item.comment_pic[0])" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view v-else class="color_66 text-center m-top30">该{{ nameDefinition.goodsName || '宝贝' }}还没有任何评价</view>
			</view>

			<!-- 店铺 -->
			<view class="rows bgwhite detailStore">
				<Store :pageData="pageData" :scan="scan" :shop_id="shop_id" showType="1"></Store>
			</view>

			<!-- 详情 -->
			<view id="details" class="bgwhite" v-if="pageData.goods_content">
				<view class="size32 color_22 bold padding30-40 m-bot10">{{ nameDefinition.goodsName || '宝贝' }}详情</view>
				<u-parse :content="pageData.goods_content" :domain="imgUrl" :scrollTable="true" :selectable="true"
					:useAnchor="true" @ready="parseDone"></u-parse>
			</view>

			<!-- 课程目录 -->
			<catalogue id="catalogue" :chapter_list="pageData.chapter_list" :goods_id="goods_id"
				v-if="pageData.goods_cate == 1" @Unlock="(screening = true), (slidetop = true)"></catalogue>

			<!-- 推荐(电商) -->
			<view id="recommend" class="recommend bgwhite padding30-40 m-top20" v-if="likeList.length && mode == 0">
				<view class="size32 color_22 bold m-bot40">{{ nameDefinition.goodsName || '宝贝' }}推荐</view>
				<view class="d-flex f-wrap">
					<view class="item d-flex f-column" v-for="(item, index) in likeList" :key="index"
						@click="toGoods(item.goods_id, item.store_id)">
						<image class="img" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'"
							mode="aspectFill"></image>
						<view class="d-flex f-column j-sb p-top10 p-bot10 flex-1">
							<view class="size22 color_22 bold500 ellipsis_2">{{ item.name }}</view>
							<view class="profitTitle_ lines" v-if="item.profitTitle">
								<text>{{ item.profitTitle }}</text>
							</view>
							<view class="size26 color_F4 bold">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rows p-bot120">
				<contact></contact>
			</view>
			<!-- 底部导航(电商) -->
			<view class="common_footer bgwhite p-top20 d-flex j-sb a-center" v-if="mode == 0">
				<view class="list d-flex a-center">
					<view class="flex-1 text-center color_66" v-if="pageData.store_id != 0"
						@click="toUrl('/pages/store/storeIndex?shop_id=' + pageData.store_id)">
						<text class="iconfont icon-store size36 m-bot6" :style="{ color }"></text>
						<view>{{ nameDefinition.storeDefinitionName || '店铺' }}</view>
					</view>
					<view class="flex-1 text-center color_66" v-else @click="backHome">
						<text class="iconfont icon-withdraw size36 m-bot6"></text>
						<view>返回首页</view>
					</view>
					<view class="flex-1 p-re">
						<view class="text-center color_66" @click="contact">
							<text class="iconfont icon-conversation_icon size36 m-bot6"></text>
							<view>客服</view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="contact" class="btn-contact" v-if="startUp.service_state != 1"></button>
						<!-- #endif -->
					</view>
					<!-- 收藏 -->
					<view class="flex-1 text-center color_66" @click="handleCollect">
						<text class="iconfont icon-01 size36 m-bot6" :style="{ color }"
							v-if="pageData.goods_collect"></text>
						<text class="iconfont icon-02 size36 m-bot6" v-else></text>
						<view>{{ pageData.goods_collect ? '已收藏' : '收藏' }}</view>
					</view>
				</view>


				<view v-if="pageData.state == 0" class="loneBtn m-left20 m-right20 size28 white text-center bgAF">
					{{ nameDefinition.goodsName || '宝贝' }}已下架
				</view>

				<!-- 上架中 -->
				<view v-else>
					<!-- 团购 -->
					<view v-if="pageData.goods_type == 2" class="groupBtn m-left20 m-right20 white d-flex">
						<view class="left flex-1 text-center bgFFA p-top4 p-bot4"
							v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0"
							@click="clickBtn(1)">
							<view class="size28">
								{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
							</view>
							<view>￥{{ pageData.goods_price }}</view>
						</view>
						<view class="right flex-1 text-center bgFF4B p-top4 p-bot4"
							v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0"
							@click="clickBtn(2)">
							<view class="size28">
								{{ pageData.goods_open_group_price_name ? pageData.goods_open_group_price_name : '一键开团' }}
							</view>
							<view>￥{{ pageData.goods_fopen_group_pricee }}</view>
						</view>
					</view>
					<!-- 普通0/特价1 -->
					<view v-else class="groupBtn m-left20 m-right20 white">
						<view class="d-flex"
							v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0">
							<!-- join_cart：是否允许添加购物车 1允许 2拒绝 -->
							<!-- is_id_number：是否需要输入身份证 1需要 2无需 -->
							<view class="left flex-1 bgFFA flexac size28"
								v-if="pageData.join_cart != 2 && pageData.is_id_number != 1" @click="clickBtn(3)">
								加入{{ cartName }}
							</view>
							<view class="right flex-1 text-center bgFF4B p-top4 p-bot4"
								:class="{ bor_radius_68: pageData.join_cart == 2 || pageData.is_id_number == 1 }"
								@click="clickBtn(1)">
								<view class="size28">
									{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
								</view>
								<view>￥{{ pageData.goods_price }}</view>
							</view>
						</view>
					</view>
					<!-- 活动未开始 -->
					<view v-if="pageData.goods_state == 2 && pageData.show_time == 1"
						class="loneBtn m-left20 m-right20 size28 white text-center bgFFA">活动未开始</view>
					<!-- 活动已结束 -->
					<view v-if="pageData.goods_state == 0 && pageData.show_time == 1"
						class="loneBtn m-left20 m-right20 size28 white text-center bgAF">活动已结束</view>
				</view>


				<!-- <template v-if="pageData.buy_config.state == 0">
					<view class="loneBtn m-left20 m-right20 size28 white text-center bgcolor" @click="$common.Tel(pageData.buy_config.tel)">
						{{ pageData.buy_config.btn_text }}
					</view>
				</template> -->
			</view>

			<!-- 底部导航(点餐) -->
			<view class="order_footer bgwhite d-flex f-column p-top20" v-if="mode == 1">
				<view class="row j-sb padding15-30">
					<view class="d-flex a-end">
						<view class="color_ff4 bold">
							<text class="size26">￥</text>
							<text
								class="size32">{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
						</view>
						<view class="color_66 size26 line-through m-left10">￥{{ pageData.goods_full_price }}</view>
					</view>
					<u-number-box v-model="v_input" integer :min="min_num" :max="maxNum" :step="step_num"
						@overlimit="overlimit">
						<view slot="minus"><text class="iconfont icon-jianshao1 size42 color_ff4"></text></view>
						<view slot="input">
							<view class="size28 color_33 bold text-center" style="width: 60rpx">{{ v_input }}</view>
						</view>
						<view slot="plus"><text class="iconfont icon-zengjia size42 color_ff4"></text></view>
					</u-number-box>
				</view>
				<view class="row j-se padding15-30 white">
					<view class="btn flexac bgFFA size28" @click="clickBtn(3)">加入{{ cartName }}</view>
					<view class="btn flexac bgFF4B size28" @click="clickBtn(1)" v-if="scan == 0">
						{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
					</view>
				</view>
			</view>
			<!-- 规格弹框(电商) -->
			<u-popup :show="showPopup" @close="showPopup = false">
				<Store :pageData="pageData" :scan="scan" :shop_id="shop_id" showType="2"></Store>
				<view class="specsPop padding30">
					<view class="d-flex">
						<image class="img bor_radius_4 m-right20 f-shrink-0"
							:src="currentSpecs.img ? $imgUrls(currentSpecs.img) : $imgUrls(pageData.goods_img)"
							mode="aspectFill" @click="$common.previewSingle(currentSpecs.img || pageData.goods_img)">
						</image>
						<view class="d-flex f-column j-sb">
							<view class="p-right40">
								<text v-if="clickBtnType == 2" style="vertical-align: top"
									class="d-inline-block white bgFF4B line40 p-left20 p-right20 bor_radius_40 m-right4">
									{{ pageData.goods_group_number }}人团
								</text>
								<text class="size28">{{ pageData.goods_name }}</text>
							</view>
							<view>
								<text class="color_FOD size32 bold">￥</text>
								<text class="color_FOD size40 bold"
									v-if="pageData.goods_type == 2 && clickBtnType == 2">{{ pageData.goods_fopen_group_pricee }}</text>
								<text class="color_FOD size40 bold"
									v-else>{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
							</view>
						</view>
					</view>
					<view class="scroll-y" style="max-height: 40vh;" v-if="pageData.getGoodsSpecs">
						<view v-for="(item, index) in specsList" :key="index">
							<view class="size28 color_33 bold m-top30 m-bot20">{{ item.title }}</view>
							<view>
								<view class="specsItm d-inline-block color_66 bor_radius_30s m-right20 m-bot20"
									v-show="item.list" v-for="(itm, idx) in item.list" :key="idx"
									@click="handleSpecs(index, itm.state, itm.specs_id)"
									:class="{ active: specs_ids[index] == itm.specs_id, color_cc: !itm.state }">
									{{ itm.title }}
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex j-sb a-center">
						<view class="size28 color_33 bold m-top30 m-bot40">数量</view>
						<view><u-number-box v-model="v_input" integer :min="min_num" :max="maxNum" :step="step_num"
								@overlimit="overlimit"></u-number-box></view>
					</view>

					<template v-if="pageData.buy_config.state == 0">
						<view v-if="specsFlag == 2" class="confirmBtn bgFF4B size30 white bold text-center"
							@click="$common.Tel(pageData.buy_config.tel)">{{ pageData.buy_config.btn_text }}</view>

					</template>

					<block v-else>

						<view v-if="specsFlag == 2" class="confirmBtn bgFF4B size30 white bold text-center"
							@click="handleSubmit">确定</view>
						<view v-if="specsFlag == 1" class="row j-sb white">
							<view class="btn flexac bgFFA size28" @click="clickBtn(3, true)">加入{{ cartName }}</view>
							<view class="btn flexac bgFF4B size28" @click="clickBtn(1, true)">
								{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
							</view>
						</view>
					</block>

				</view>
			</u-popup>
			<!-- 运费说明 -->
			<u-popup :show="showFreDesc" closeable @close="showFreDesc = false">
				<view class="padding30" style="min-height: 300rpx">
					<view class="size32 color_22 bold m-bot30">运费说明</view>
					<u-parse :content="freDesc" :domain="imgUrl" :scrollTable="true" :selectable="true"
						:useAnchor="true"></u-parse>
				</view>
			</u-popup>

			<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
			<SharePoster v-if="showShareQr" :myid="goods_id" type="2" :pageType="'10&gid=' + goods_id"
				@closePoster="showShareQr = false"></SharePoster>
			<showModeldetail v-if="showModal2" @cancelFunc="showModal2 = false" :title="modalInfo.title"
				:msg="modalInfo.msg" :btn1="modalInfo.btn1" :btn2="modalInfo.btn2" :btn1_url="modalInfo.btn1_url"
				:btn2_url="modalInfo.btn2_url" :jump="modalInfo.jump" type="99"></showModeldetail>
		</view>

		<!-- 首屏显示色块 -->
		<view class="bgf8" v-if="!pageData">
			<view style="height: 750rpx"></view>
			<view class="padding20-40 bgwhite">
				<view class="bgf8 m-bot20 bor_radius_10" style="width: 140rpx; height: 60rpx"></view>
				<view class="bgf8 bor_radius_10" style="height: 50rpx"></view>
				<view class="bgf8 m-top20 bor_radius_10" style="height: 40rpx"></view>
			</view>
			<view class="padding20" v-if="mode == 0">
				<view class="card padding20 bgwhite bor_radius_8">
					<view class="bgf8 bor_radius_10" style="height: 32rpx" v-for="item in 3" :key="item"
						:class="{ 'm-bot30': item < 2 }"></view>
				</view>
			</view>
			<view class="package padding20" v-if="mode == 1">
				<view class="card padding20 bgwhite bor_radius_8">
					<view class="item bgf8 bor_radius_10" v-for="item in 4" :key="item"
						:class="{ 'm-bot20': item < 3 }"></view>
				</view>
			</view>
			<view class="bgwhite padding30-40" style="height: 400rpx">
				<view class="bgf8 bor_radius_10" style="width: 160rpx; height: 40rpx"></view>
			</view>
			<view class="common_footer bgwhite p-top20 d-flex j-sb a-center" v-if="mode == 0">
				<view class="list d-flex j-sa a-center">
					<view class="bgf8 bor_radius_10" style="width: 40rpx; height: 60rpx" v-for="item in 3" :key="item">
					</view>
				</view>
				<view class="groupBtn bgf8 m-left20 m-right20 bor_radius_30" style="height: 70rpx"></view>
			</view>
			<view class="order_footer bgwhite p-top20" v-if="mode == 1">
				<view class="row j-sb padding15-30">
					<view class="bgf8 bor_radius_10" v-for="item in 2" :key="item" style="width: 160rpx; height: 40rpx">
					</view>
				</view>
				<view class="row j-se padding15-30">
					<view class="btn bgf8" v-for="item in 2" :key="item"></view>
				</view>
			</view>
		</view>

		<specsPopup :showPopup="showSpecsPop" :pageData="info" @close="showSpecsPop = false" />
	</view>
</template>

<script>
	import SharePoster from '@/components/sharePoster.vue';
	import Join from '@/components/Join.vue';
	import catalogue from '@/components/answer/catalogue.vue';
	import Store from '@/components/details/Store.vue';
	import goodsBrand from '@/components/details/goodsBrand.vue';
	import specsPopup from '@/components/specsPopup.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			SharePoster,
			Join,
			catalogue,
			Store,
			goodsBrand,
			specsPopup
		},
		data() {
			return {
				staticUrl: this.staticUrl,
				baseUrl: this.baseUrl,
				imgUrl: this.imgUrl,
				menuButtonTop: getApp().globalData.menuButtonObject.top, // 胶囊按钮的top值
				goods_id: '',
				shop_id: '',
				mode: 0, // 默认电商、1是点餐
				tabList: [{
						name: '宝贝'
					},
					{
						name: '评价'
					},
					{
						name: '详情'
					}
				],
				currentTab: 0,
				pageData: '', // 详情
				swiperList: [],
				currentNum: 0,
				likeList: [],
				isFold: true,
				commentData: {},
				cartNum: 0,
				addr: '',
				freight: '',
				freDesc: '',
				showFreDesc: false,
				toTop: false,
				view1Top: 0,
				view2Top: 0,
				view3Top: 0,
				v_input: 1, // 计数器

				showPopup: false,
				clickBtnType: 1, // 点击"立即购买"为1、"一键开团"为2、"加入购物车"为3
				specsList: [], // 规格列表
				specsCopy: '', // 原始数据字符串
				specsFlag: 1, // 点击"选择"显示规格弹框为1、点击底部为2
				specs_ids: [],
				currentSpecs: {},
				specs_title: '',
				stock: '', // 当前规格组合的库存或总库存

				fromShare: 0,
				showModal: false,
				showShareQr: false,
				showModal2: false,
				modalInfo: {
					title: '温馨提示',
					msg: '当前您的信息不完整',
					btn1: '稍后完善',
					btn2: '去完善',
					btn1_url: '',
					btn2_url: '',
					jump: ''
				},
				showed: false, // 避免首次加载页面执行"fade-out"动画
				scan: 0, // 是否来自扫码点餐
				tid: '', // 桌号id
				isHome: 0,
				showSpecsPop: false,
				info: '',
				min_num: 1,
				step_num: 1
			};
		},
		computed: {
			...mapState(['nameDefinition', 'color', 'totalHeight', 'vid', 'startUp', 'cartName', 'bid']),
			likeListCom() {
				return this.likeList.filter((item, index) => index < 4 || !this.isFold);
			},
			tabWidth() {
				return this.tabList.length == 4 ? '25%' : '33.33%';
			},
			maxNum() {
				let max = this.pageData.buy_config?.max_num || this.stock
				return max > parseFloat(this.stock) ? this.stock : max
			}
		},

		onLoad(e) {
			let that = this;
			if (e.goodsid) that.goods_id = e.goodsid;
			if (e.goods_id) that.goods_id = e.goods_id;
			if (e.mode) that.mode = e.mode;
			if (e.fromShare) that.fromShare = e.fromShare;
			if (e.scan) that.scan = e.scan;
			if (e.tid) that.tid = e.tid;
			if (e.shop_id) that.shop_id = e.shop_id;
			if (e.share_v_id) uni.setStorageSync('share_v_id', e.share_v_id);
			if (e.isHome) that.isHome = e.isHome;
			if (e.bid)
				that.getUser({
					bid: e.bid
				});
			that.getCart();
			that.getPageData();
			setTimeout(() => {
				that.getViewTop('#evaluate').then((res) => {
					that.view1Top = res;
				});
				that.getViewTop('#details').then((res) => {
					that.view2Top = res;
				});
				that.getViewTop('#recommend').then((res) => {
					that.view3Top = res;
				});
			}, 1000);
		},
		onShow() {
			let that = this;
			that.getOldAddress();
		},
		methods: {
			...mapMutations(['getUser']),
			getPageData() {
				// 页面初始化数据
				let that = this;
				that.$http
					.post({
						url: '/singleSaleApi/singleDetails',
						data: {
							goods_id: that.goods_id,
							shop_id: that.shop_id
						}
					})
					.then((res) => {
						if (res.errcode != '100') return that.$Toast(res.msg);
						const result = res.data;
						that.pageData = result;
						that.min_num = that.pageData.buy_config.min_num
						that.step_num = that.pageData.buy_config.step_num
						that.v_input = that.min_num
						if (result.store_id && !result.shops) uni.setStorageSync('shop_id', result.store_id);

						that.stock = that.pageData.stock || '0';
						// 轮播图
						that.swiperList = that.pageData.goods_photo?.map((item) => ({
							url: item ? that.$imgUrls(item) : that.staticUrl + '/images/imageLoading.png',
							type: 'image'
						}));
						if (that.pageData.goods_video) {
							that.swiperList.unshift({
								url: that.pageData.goods_video,
								type: 'video'
							});
						}
						// 规格
						let {
							specsList,
							specsPrice
						} = that.pageData.getGoodsSpecs;
						if (specsList && specsPrice) {
							that.specsList = specsList;
							that.specsCopy = JSON.stringify(that.specsList);
							let first = specsPrice.find((item) => item.stock && item.stock !=
								0); // 接口返回的specs_ids默认从小到大排序
							if (first) {
								specsList.forEach((item, index) => {
									// 强制按照规格类别排序且个数一致
									let obj = item.list.find((itm) => first.specs_ids.includes(itm.specs_id));
									that.specs_ids[index] = obj ? obj.specs_id : '';
								});
								that.stock = first.stock;
								that.currentSpecs = first;
							}
						}
						// 去参团-头像组
						if (that.pageData.groupData && that.pageData.goods_type == 2) {
							that.pageData.groupData.forEach((item) => {
								item.groupUsers = item.groupUsers.map((itm) => ({
									v_headimg: that.$imgUrls(itm.v_headimg)
								}));
							});
						}
						that.getLikes();
						that.getComment();
					});
			},
			testSample() {
				if (!this.vid) return (this.showModal = true);
				this.info = this.pageData.recommend[0]
				this.showSpecsPop = true
			},
			getLikes() {
				// 推荐
				let that = this;
				that.$http
					.post({
						url: '/singleSaleApi/guessLikeGoods',
						data: {
							goods_id: that.goods_id,
							shop_id: that.shop_id
						}
					})
					.then((res) => {
						if (res.data && res.data.length) {
							that.likeList = res.data;
							if (that.mode) return;
							that.tabList.push({
								name: '推荐'
							});
						}
					});
			},
			getComment() {
				// 评论
				let that = this;
				that.$http
					.get({
						url: '/singleSaleApi/get_comment',
						data: {
							goods_id: that.goods_id,
							shop_id: that.shop_id,
							page: 1,
							pageNum: 6
						}
					})
					.then((res) => {
						if (res.errcode == 100) {
							that.commentData = res;
						}
					});
			},
			getCart() {
				// 获取购物车数据
				let that = this;
				that.$http
					.post({
						url: '/zzj_singleSaleApi/cartList',
						data: {
							shop_id: that.shop_id
						}
					})
					.then((res) => {
						if (!res.data) return;
						that.cartNum = res.cartNum;
					});
			},
			getOldAddress() {
				let that = this;
				that.$http
					.get({
						url: '/SRA_simMallApi/getOldAddress',
						data: {
							type: 3
						}
					})
					.then((res) => {
						if (res.code == 100 && res.data && res.data.Aaddress) {
							that.addr = res.data.Aregion + res.data.Aaddress;
							that.getFreight();
						}
					});
			},
			getFreight() {
				let that = this;
				that.$http
					.post({
						url: '/zzj_singleSaleApi/getGoodsFreight',
						data: {
							goods_id: that.goods_id,
							address: that.addr
						}
					})
					.then((res) => {
						if (res.code == 200 && res.data) {
							that.freight = res.data.title;
							that.freDesc = res.data.content;
						}
					});
			},
			toCart() {
				let that = this;
				if (!that.vid) return (that.showModal = true);
				if (that.mode == 0) {
					that.$pop.toTab(7);
				} else {
					if (that.scan == 1) return that.toUrl('/otherPage/custom/placeOrder?tid=' + that.tid);
					that.$pop.toTab(4);
				}
			},
			previewImg(index) {
				// 预览图片
				let that = this;
				if (that.swiperList[index].type != 'image') return;
				let urls = [];
				that.swiperList.forEach((item) => {
					if (item.type == 'image') {
						urls.push(item.url);
					}
				});
				uni.previewImage({
					current: that.swiperList[index].url,
					urls,
					indicator: 'number'
				});
			},
			getViewTop(id) {
				let that = this;
				// 查询节点到顶部距离
				const query = uni.createSelectorQuery().in(this);
				const allTop = that.totalHeight + 44;
				return new Promise((resolve) => {
					query
						.select(id)
						.boundingClientRect((data) => {
							if (data) {
								resolve(data.top - allTop);
							} else {
								resolve(0);
							}
						})
						.exec();
				});
			},
			parseDone() {
				let that = this;
				that.getViewTop('#recommend').then((res) => {
					that.view3Top = res;
				});
			},
			tabClick({
				index
			}) {
				let that = this;
				if (index == 0) {
					// 宝贝
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					}); // 将页面滚动到目标位置
				} else if (index == 1) {
					// 评价
					uni.pageScrollTo({
						scrollTop: that.view1Top,
						duration: 100
					});
				} else if (index == 2) {
					// 详情
					uni.pageScrollTo({
						scrollTop: that.view2Top,
						duration: 100
					});
				} else if (index == 3) {
					// 推荐
					uni.pageScrollTo({
						scrollTop: that.view3Top,
						duration: 100
					});
				}
			},
			handleCollect() {
				// 收藏
				let that = this;
				if (!that.vid) return (that.showModal = true);
				that.$http
					.post({
						url: '/singleSaleApi/goods_collect',
						data: {
							goods_id: that.goods_id,
							shop_id: that.shop_id
						}
					})
					.then((res) => {
						if (res.code != 200) return that.$Toast(res.msg);
						that.pageData.goods_collect = that.pageData.goods_collect ? 0 : 1;
					});
			},
			handleShare() {
				// 分享海报
				let that = this;
				if (!that.vid) return (that.showModal = true);
				that.showShareQr = true;
			},
			contact() {
				// 客服
				let that = this;
				if (!that.vid) return (that.showModal = true);
				if (that.startUp.service_state == 1) {
					// 客服系统
					uni.navigateTo({
						url: '/userPage/message/consult?shop_id=' + that.pageData.store_id
					});
				} else {
					that.call();
				}
			},
			clickBtn(type, bool) {
				let that = this;
				that.specsFlag = bool ? 1 : 2;
				if (!that.vid) return (that.showModal = true);
				that.judgeBuyPower(type);
			},
			judgeBuyPower(type) {
				// 判断有无购买权限
				let that = this;
				that.$http
					.post({
						url: '/zzj_singleSaleApi/judgmentBuyPower',
						data: {
							goods_id: that.goods_id,
							shop_id: that.shop_id ? that.shop_id : uni.getStorageSync('shop_id')
						}
					})
					.then((res) => {
						if (res.code == 100) {
							// 通过验证
							if (that.pageData.bind == 0) return (that.showModal2 = true);
							if (that.pageData.show_time == 1 && that.pageData.goods_state == 2) return that.$Toast(
								'活动未开始哦');
							if (that.pageData.show_time == 1 && that.pageData.goods_state == 0) return that.$Toast(
								'活动已结束哦');
							that.clickBtnType = type;
							if (that.mode == 0 && that.specsFlag == 2) {
								that.showPopup = true;
							} else {
								that.handleSubmit();
							}
						}
						if (res.code == 'jumpRoute' || (res.code == 'jumpUrl' && res.data != '')) {
							that.showModal2 = true;
							that.modalInfo = {
								...res,
								jump: res.code
							};
						}
					});
			},
			overlimit(type) {
				let that = this;
				if (type == 'plus') {
					that.$Toast('该商品已达购买上限');
				}
			},
			handleSpecs(index, itmState, id) {
				// 类别索引,规格状态,规格id
				let that = this;
				if (!itmState) return; // 禁选
				if (that.specs_ids[index] == id) return; // 已选

				let {
					specsPrice
				} = that.pageData.getGoodsSpecs;
				that.specs_ids[index] = id; // 非响应式
				let empty = that.specs_ids.filter((item) => !item);

				if (!empty.length) {
					// 已选完
					let up = that.specs_ids.slice().sort((a, b) => a - b); // 创建副本再排序不影响原数组
					let current = specsPrice.find((item) => item.specs_ids == up.toString());

					if (current) {
						that.specs_ids = [...that.specs_ids]; // 更新视图
						that.stock = current.stock;
						that.currentSpecs = current;
						// 当前所选类别有无禁选规格，无则还原list
						let result = that.specsList[index].list.find((item) => !item.state);
						if (!result) that.specsList = JSON.parse(that.specsCopy);
					} else {
						// 没找到为undefined
						that.specs_ids = that.specs_ids.map((item) => (item == id ? id : '')); // 只保留当前所选规格，其余类别规格id清空
						// that.specs_ids[index] = ''
						// that.specsList[index].list.forEach(item=>{
						//     item.state = item.specs_id == id ? false : true
						// })
					}
				} else if (empty.length == 1) {
					// 仅剩一个类别未选，需判断该类别有无禁选规格
					that.specs_ids = [...that.specs_ids];
					// 未选类别索引
					let i = that.specs_ids.findIndex((item) => !item);
					that.specsList[i].list.forEach((item) => {
						let arr = JSON.parse(JSON.stringify(that.specs_ids));
						arr[i] = item.specs_id; // 每一项规格组合
						let result = specsPrice.find((itm) => itm.specs_ids == arr.sort((a, b) => a - b)
							.toString());
						item.state = result ? true : false;
					});
				} else {
					that.specs_ids = [...that.specs_ids];
				}
			},
			handleSubmit() {
				let that = this;
				let params = `?goods_id=${that.goods_id}&goods_num=${that.v_input}`;
				if (that.specsList.length) {
					let empty = that.specs_ids.findIndex((item) => !item);
					if (empty == -1) {
						// 已选完
						params =
							`${params}&specs_bind_id=${that.currentSpecs.id}&specs_bind_text=${that.currentSpecs.specs_title}`;
						that.specs_title = that.currentSpecs.specs_title;
					} else {
						return that.$Toast('请选择规格');
					}
				}
				if (that.v_input > that.stock) return that.$Toast('库存不足');

				if (that.clickBtnType == 1) {
					// 立即购买
					that.toUrl('/orderPage/order/createOrders' + params);
				} else if (that.clickBtnType == 2) {
					// 一键开团
					that.toUrl('/orderPage/order/createOrders' + params + '&open_group=1');
				} else if (that.clickBtnType == 3) {
					// 加入购物车
					that.$http
						.post({
							url: '/zzj_singleSaleApi/joinCart',
							data: {
								num: that.v_input,
								specs_bind_id: that.currentSpecs.id || '',
								specs_bind_text: that.currentSpecs.specs_title || '',
								goods_id: that.goods_id,
								tid: that.tid,
								shop_id: that.shop_id ? that.shop_id : uni.getStorageSync('shop_id')
							}
						})
						.then((res) => {
							if (res.errcode != 100) return that.$Toast(res.msg);
							that.getCart();
							that.showPopup = false;
							that.$Toast(`加入${that.cartName}成功`);
							if (that.mode == 1 && !that.isHome) that.$back();
							if (that.mode == 1 && that.isHome == 1) {
								let path = that.scan == 1 ? '/otherPage/custom/placeOrder' : '/pages/classify/repast';
								that.$rectTo(path);
							}
						});
				}
			}
		},
		onPageScroll(e) {
			let that = this;
			if (e.scrollTop > 100) {
				that.toTop = true;
				if (!that.showed) that.showed = true;
			} else {
				that.toTop = false;
			}
			if (e.scrollTop < that.view1Top) {
				that.currentTab = 0;
			}
			if (e.scrollTop >= that.view1Top) {
				that.currentTab = 1;
			}
			if (e.scrollTop >= that.view2Top) {
				that.currentTab = 2;
			}
			if (e.scrollTop >= that.view3Top && that.tabList.length > 3) {
				that.currentTab = 3;
			}
		},
		onShareAppMessage() {
			let that = this;
			that.$addShareNum('goods', that.goods_id, '1');
			return {
				title: that.pageData.goods_name,
				desc: that.pageData.goods_info,
				path: `/pages/index/index?share_v_id=${that.vid}&pageType=10&gid=${that.goods_id}`,
				imageUrl: that.$imgUrls(that.pageData.goods_img)
			};
		},
		onShareTimeline() {
			// 分享的是单页而非小程序，不经过首页
			this.$addShareNum('goods', this.goods_id, '2');
			return {
				title: this.pageData.goods_name,
				query: `share_v_id=${this.vid}&goods_id=${this.goods_id}&bid=${this.bid}&fromShare=1`,
				imageUrl: this.$imgUrls(this.pageData.goods_img)
			};
		}
	};
</script>

<style lang="scss" scoped>
	.detailPage {
		padding-bottom: calc(var(--page-bot) + constant(safe-area-inset-bottom));
		padding-bottom: calc(var(--page-bot) + env(safe-area-inset-bottom));
	}

	.fcBtn {
		position: fixed;
		left: 20rpx;
		z-index: 20;
		width: 160rpx;
		height: 64rpx;
		border-radius: 64rpx;
		border: 1rpx solid #dadbde;
	}

	.topNav {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		opacity: 0;
		pointer-events: none; // 是否正常点击
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fade-out {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.showTopNav {
		animation: fade-in 1s forwards; // 保持最后一帧
		pointer-events: auto;
	}

	.hideTopNav {
		animation: fade-out 1s forwards;
		pointer-events: none;
	}

	.indicator-num {
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 200rpx;
		width: 100rpx;
	}

	.countDown {
		height: 100rpx;
		background: linear-gradient(45deg, #ffdfc9, #fff1e7, #ffb68e);

		.actName {
			width: 244rpx;
			height: 100%;
			background: linear-gradient(-45deg, #ff4e8c, #ff4b52, #ff9656);
			border-bottom-right-radius: 100rpx;
		}

		.stock {
			color: #fe3c5e;
		}

		.progress {
			width: 150rpx;
		}
	}

	.card {
		width: 100%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	}

	.recommend {
		.item {
			width: 200rpx;
			height: 360rpx;
			margin-right: 35rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.img {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.evaluate {
		.label {
			line-height: 48rpx;
			background: #ffecec;
			border-radius: 24rpx;
			padding: 0 15rpx;
		}

		.cont {
			height: 220rpx;

			.item {
				width: 500rpx;
				height: 220rpx;
				border: 2rpx solid #eeeeee;

				.img {
					width: 220rpx;
					height: 220rpx;
				}
			}
		}
	}

	.common_footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		z-index: 10;
		border-top: 1rpx solid #dddddd;

		.list {
			width: 300rpx;
		}

		.loneBtn {
			width: 410rpx;
			line-height: 72rpx;
			border-radius: 72rpx;
		}

		.groupBtn {
			width: 410rpx;

			.left {
				border-radius: 68rpx 0 0 68rpx;
			}

			.right {
				border-radius: 0 68rpx 68rpx 0;
			}
		}
	}

	.specsPop {
		.img {
			width: 168rpx;
			height: 168rpx;
		}

		.specsItm {
			background: #f4f4f4;
			border: 2rpx solid #f4f4f4;
			padding: 8rpx 36rpx;

			&.active {
				background: #fff0f0;
				border: 2rpx solid #ff4b4e;
				color: #ff4b4e;
			}
		}

		.confirmBtn {
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			width: 100%;
			line-height: 80rpx;
			border-radius: 80rpx;
		}

		.btn {
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			width: 48%;
			height: 72rpx;
			border-radius: 36rpx;
		}
	}

	// 点餐
	.package {
		.item {
			width: 100%;
			height: 230rpx;

			.img {
				width: 190rpx;
				height: 190rpx;
			}
		}
	}

	.order_footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		z-index: 10;
		border-top: 1rpx solid #dddddd;

		.btn {
			width: 300rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}
	}

	.specsTag {
		min-width: 144rpx;
		line-height: 54rpx;
		padding: 0 10rpx;
		background: #f4f4f4;
		border: 2rpx solid #f4f4f4;

		&.active {
			background: #fff0f0;
			border: 2rpx solid #ff4b4e;
			color: #ff4b4e;
		}
	}

	.detailStore {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.test {
		padding: 10rpx 12rpx;
		background: #62d14f;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: white;
	}
</style>